<template>
    <div>
        <section class="inner-page-banner" data-bg-image="media/banner/banner1.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumbs-area">
                            <h1>My Account</h1>
                            <ul>
                                <li>
                                    <a href="index.html">Home</a>
                                </li>
                                <li>My Account</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=        Account Page Start      	=-->
        <!--=====================================-->
        <section class="section-padding-equal-70">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 sidebar-break-sm sidebar-widget-area mt-0">
                        <div class="widget-bottom-margin widget-account-menu widget-light-bg">
                            <h3 class="widget-border-title">Menu</h3>
                            <ul class="nav nav-tabs flex-column" role="tablist">
                                <li v-for="(item, i) in nav" :key="i" class="nav-item" @click="tab(item)">
                                    <a :class="item.name==title?'nav-link active':'nav-link'" data-toggle="tab" href="#dashboard" role="tab"
                                       :aria-selected="item.name==title?true:false">{{item.name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="tab-content">
                            <router-view />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>

    export default {
        name: 'user',
        data() {
            return {
                title: '仪表板',
                nav: [
                    {name: '仪表板', path: 'dashboard'},
                    {name: '我的清单', path: 'mlist'},
                    {name: '付款方式', path: 'payment'},
                    {name: '账户详细资料', path: 'account'},
                ],
            }
        },
        created () {
            let path = this.$route.path.split('/')[2]
            this.nav.forEach(item => {
                if (item.path === path) {
                    this.title = item.name
                }
            })
        },
        watch: {
            $route (to) {
                let path = to.path.split('/')[2]
                this.nav.forEach(item => {
                    if (item.path === path) {
                        this.title = item.name
                    }
                })
            }
        },
        methods: {
            tab(e) {
                this.$router.push({path: '/user/' + e.path})
            }
        }
    }
</script>